import React from "react"
import { Layout, Collapse, Card, Statistic, Row, Col, Divider, Button } from "antd"
import { SettingOutlined, DoubleLeftOutlined, DoubleRightOutlined } from "@ant-design/icons"
import {Graph} from "../graph/Graph"

const { Panel } = Collapse



export default class Sidebar extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            visible: false
        }

    }

    toggleSidebar() {
        const state = this.state.visible;
        this.setState({
            visible: !state
        })
    }

    openSidebar() {
        const state = this.state.visible;
        if(!state) this.setState({
            visible: true
        })

    }


    render() {
        return (
            <>
                <Button size="small"
                    icon={<DoubleLeftOutlined />}
                    type="primary"
                    style={{ zIndex: 100, position: "absolute", right: 0, top: 55, display: this.state.visible ? "none": "block" }}
                    onClick={() => this.toggleSidebar() } />

                <Card size="small" title="状态栏"
                    style={{
                        position: "absolute",
                        right: 10,
                        top: 45,
                        width: 300,
                        height: window.innerHeight - 60,
                        zIndex: 100,
                        boxShadow: "0 2px 8px #f0f1f2",
                        backgroundColor: "rgba(0, 0, 0, 0,6)",
                        display: this.state.visible ? "block": "none"
                    }}
                    headStyle={{
                        fontSize: 12,
                    }}
                    extra={<DoubleRightOutlined onClick={ ()=> this.toggleSidebar () } />}
                >


                    <p></p>
                </Card>
            </>
        )
    }
}
